<template>
  <ul class="my_list">
      <li v-for="(item,index) in childrenList" :key="index" @click="$router.push(`/detail?id=${item.id}`)">
         <img :src="'https://elm.cangdu.org/img/'+item.image_path" alt="">
         <section>
            <p>{{item.name}}</p>
         </section>
      </li>
  </ul>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  props:{
    childrenList: Array
  },
  setup() {},
};
</script>
<style lang="scss" scoped>
.my_list{
  height: calc(100% - 50px);
  overflow: auto;
  li{
      display: flex;
      background: #fff;
      padding: 10px 15px;
      border-bottom: 1px solid #e9e9e9;
      img{
        width: 80px;
      }
      section{
        flex: 1;
        margin-left: 10px;
      }
  }
}
</style>